<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="html" uri="http://struts.apache.org/tags-html-el" %>
<%@ taglib uri="http://amc.af.mil/radtaglibrary" prefix="rad" %>
<%@ taglib uri="http://amc.af.mil/portal-el" prefix="portal" %>
<%@ taglib uri="http://java.sun.com/jstl/core" prefix="c" %>
<html>
<head>
    <title>Add Multiple Items</title>
    <link type="text/css" rel="stylesheet" href="yui/build/calendar/assets/skins/sam/calendar.css"/>
    <link type="text/css" rel="stylesheet" href="yui/build/calendar/assets/skins/sam/calendar-skin.css"/>
    <link type="text/css" rel="stylesheet" href="yui/build/button/assets/skins/sam/button.css"/>
    <script type="text/javascript" src="yui/build/yuiloader/yuiloader-beta-min.js"></script>
    <script type="text/javascript" src="yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>
    <script type="text/javascript" src="yui/build/json/json.js"></script>
    <script type="text/javascript" src="yui/build/calendar/calendar.js"></script>
    <script type="text/javascript" src="yui/build/connection/connection.js"></script>
    <style type="text/css">
        #calContainer {
            display: none;
            position: absolute;
            left: 200px;
            top: 300px;
            z-index: 1
        }
    </style>
</head>

<body onload="javascript:isLoaded();">

<rad:useBean id="adpeAccountViewHelper"/>
<rad:useBean id="manufacturerViewHelper"/>
<rad:useBean id="itemModelViewHelper"/>
<rad:useBean id="equipmentTypeViewHelper"/>


<div id="portal-left-bar">
    <jsp:include page="../navigation/navigationMenu.jsp"/>
</div>

<div id="portal-content">
    <portal:box title="Add Items" style="width: 90%;">
        <div id="addMultipleItems">

            <html:form action="equipmentItem/saveItems.do" method="post">
                <p>
                    <label for="adpeAccount">ADPE Account</label>
                    <html:select property="adpeAccount" styleId="adpeAccount">
                        <html:optionsCollection name="adpeAccountViewHelper"
                                                property="adpeAccountsByAccount"
                                                value="id"
                                                label="name"/>
                    </html:select>
                </p>

                <p>
                    <label for="itemType">Equipment Type</label>
                    <html:select property="equipmentType" styleId="equipmentType" value="-1"
                                 onchange="javascript:chainSelect('equipmentType','manufacturer','getManufacturerByEquipmentTypeAction.do')">
                        <html:option value="-1">-- Select --</html:option>
                        <html:optionsCollection name="equipmentTypeViewHelper"
                                                property="all"
                                                value="id"
                                                label="name"/>
                    </html:select>
                </p>

                <p>&nbsp;</p>
                <table id="equipmentItemTable" style="width: 100%; border-width: 1">
                    <thead>
                        <tr>
                            <th>Manufacturer</th>
                            <th>Model</th>
                            <th>Serial</th>
                            <th>Description</th>
                            <th>Cost</th>
                            <th>Purchase Date</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr id="1">
                            <td>
                                <html:select property="manufacturer" styleId="manufacturer"
                                             onchange="javascript:chainSelect('manufacturer','itemModel','itemModel/getByManufacturer.do');">
                                    <html:option value="-1">Select</html:option>
                                    <html:optionsCollection name="manufacturerViewHelper"
                                                            property="all"
                                                            value="id"
                                                            label="name"/>
                                </html:select>
                            </td>
                            <td>
                                <html:select property="model" styleId="itemModel" style="width:12em"
                                        onchange="javascript:suggestDescription()">
                                    <html:option value="-1">Select</html:option>
                                    <html:optionsCollection name="itemModelViewHelper"
                                                            property="all"
                                                            value="id"
                                                            label="name"/>
                                </html:select>
                            </td>
                            <td>
                                <html:text property="serialNumber" styleId="serialNumber" value=""/>
                            </td>
                            <td>
                                <html:text property="description" styleId="description" value=""/>
                            </td>
                            <td>
                                <html:text property="itemCost" styleId="itemCost" value=""/>
                            </td>
                            <td style="white-space: nowrap; vertical-align:middle;">
                                <html:text property="purchaseDate" styleId="purchaseDate" readonly="true" value=""/>
                                <button type="button" id="showCalendar">
                                    <img src="images/calendar-icon.gif" alt="Calendar"/>
                                </button>

                                <div id="parent1" class="yui-skin-sam">
                                    <div id="calContainer"></div>
                                </div>
                            </td>
                            <td>
                                <input type="button" onclick="javascript:validateRow(this);" value="ADD"/>
                                <input type="button" disabled="disabled" value="REMOVE"/>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <p style="text-align:right">New Row</p>

                <p style="text-align:center"><input type="submit" value="Save Items"/></p>
            </html:form>

        </div>
    </portal:box>

</div>
<script type="text/javascript">
    //YAHOO.namespace("addItems");
    YAHOO.namespace("addItems.purchaseDateCalendar");
    YAHOO.addItems.purchaseDateCalendar.init = function() {

        YAHOO.addItems.purchaseDateCalendar.calendar = new YAHOO.widget.Calendar("pdCalendar",
                "calContainer",
        {close: true, title: 'Purchase Date'});

        YAHOO.addItems.purchaseDateCalendar.calendar.render();
        YAHOO.addItems.purchaseDateCalendar.calendar.hide();

        YAHOO.util.Event.addListener('showCalendar', 'click', showCalendar);

        YAHOO.addItems.purchaseDateCalendar.calendar.selectEvent.subscribe(handleSelect,
                YAHOO.addItems.purchaseDateCalendar.calendar,
                true);
    }

    function showCalendar() {
        YAHOO.addItems.purchaseDateCalendar.calendar.show();

    }

    function handleSelect(type, args, obj) {

        var allDates = args[0];
        var singleDate = allDates[0];

        var months = ['JAN','FEB','MAR','APR','MAY','JUN','JUL','AUG','SEP','OCT','NOV','DEC'];

        var year = singleDate[0];
        var month = singleDate[1] - 1;
        var day = singleDate[2];

        var formattedDate = day + '-' + months[month] + '-' + year;

        document.getElementById('purchaseDate').value = formattedDate;

        YAHOO.addItems.purchaseDateCalendar.calendar.hide();
    }

    YAHOO.util.Event.onDOMReady(YAHOO.addItems.purchaseDateCalendar.init);

    function suggestDescription() {

        var callbacks = {
            success: function(o) {

                var json = YAHOO.lang.JSON.parse(o.responseText);
                document.getElementById('description').value = json.description;
                document.getElementById('itemCost').value = json.cost;
                document.getElementById('purchaseDate').value = json.purchaseDate;

            },
            failure: function(o) {
                alert(o.responseText);
            }
        }
        var itemModelId = document.getElementById('itemModel').value;
        var request = YAHOO.util.Connect.asyncRequest('GET',
                'equipmentItem/suggestDescription.do?itemModelId=' + itemModelId,
                callbacks);
    }

    YAHOO.util.Event.addListener("itemModel", "onchange", function() {
        suggestDescription();
    });


</script>
</body>
</html>